<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#canvas{
				height: 400px;
				width: 400px;
				border: 1px solid #000000;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" height="800" width="800"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");
			var tangram = [{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"cornflowerblue"},
						{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"pink"},
						{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"greenyellow"},
						{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"yellow"},
						{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"coral"},
						{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"lemonchiffon"},
						{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"gainsboro"}];
						
			for (var i=0;i<tangram.length;i++) {
				context.beginPath();
				for(var j=0;j<tangram[i].p.length;j++){
					context.lineTo(tangram[i].p[j].x,tangram[i].p[j].y);
				}
				context.fillStyle = tangram[i].color;
				context.fill();
				context.closePath();
			}			
		</script>
	</body>
</html>
